<template>
    <el-container>
        <!-- <div class="box">你好</div> -->
        <el-header>
            <div class="sa-flex-row sa-m-t-20 sa-col-center">
                <div class="sa-m-r-10 title-txt">货源推荐</div>
                <!-- <div class="category-txt">商品&nbsp;/&nbsp;商机货源&nbsp;/&nbsp;货源推荐&nbsp;/&nbsp;货源详情</div> -->
            </div>
        </el-header>
        <el-main v-loading="loading">
            <div class="goods-info sa-flex-row sa-row-left">
                <div class="img-view">
                    <el-image style="width: 355px;height: 363px;" :src="calcImgSrc" />
                    <div class="sa-flex-row">
                        <div class="sa-flex-row sa-row-center sa-col-center icon" @click="preClick"
                            v-if="state.detail.images && state.detail.images.length >= 5">
                            <el-icon :size="20">
                                <ArrowLeft />
                            </el-icon>
                        </div>
                        <el-scrollbar :always="false" ref="scollbar">
                            <div class="scrollbar-content">
                                <template v-for="(item, index) in state.detail.images" :key="index">
                                    <el-image :src="checkUrl(item)" @click="itemClick(index)"
                                        :class="{ select: index == selectIndex, unselect: index != selectIndex }"
                                        class="scrollbar-item">
                                    </el-image>
                                </template>

                            </div>
                        </el-scrollbar>
                        <div class="sa-flex-row sa-row-center sa-col-center icon" @click="nextClick"
                            v-if="state.detail.images && state.detail.images.length >= 5">
                            <el-icon :size="20">
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                </div>
                <div class="info sa-m-l-28 sa-flex-col sa-row-between">
                    <div class="info-top">
                        <div class="merchant sa-flex-row sa-col-center">
                            <div class="merchant-txt">{{ state.detail.supplier }}</div>
                            <div class="merchant-title sa-m-l-20 sa-line-2">{{ state.detail.title }}</div>
                            <!-- <div class="sa-m-l-20 sa-flex-row sa-row-center sa-col-center">
                                <el-icon size="30" color="#3768FA">
                                    <Document />
                                </el-icon>
                                <div class="lookfor sa-m-l-10">查看货源信息</div>
                            </div> -->
                        </div>
                        <div class="info-item sa-flex-row sa-m-t-22">
                            <div class="info-item-label">采购价</div>
                            <div class="info-item-title color-red">￥{{ calcPrice }}</div>
                        </div>
                        <div class="info-item sa-flex-row sa-m-t-22" v-for="(item, index) in state.detail.params"
                            :key="index">
                            <div class="info-item-label">{{ item.title }}</div>
                            <div class="info-item-title color-black">{{ item.content }}</div>
                        </div>

                    </div>
                    <div class="btns-group sa-flex-row sa-row-left">
                        <div class="one-btn sa-m-r-20">一件铺货</div>
                        <div class="two-btn sa-m-l-20">加入收藏</div>
                    </div>
                </div>
            </div>
            <div class="attr sa-m-t-28">
                <div class="attr-txt sa-m-b-16">商品属性</div>
                <div class="table-item">
                    <template v-for="(item, index) in calcAttributes" :key="index">
                        <div class="item sa-flex-row ">
                            <div class="item-label">{{ item.attributeName }}</div>
                            <div class="item-txt">{{ item.value }}</div>
                        </div>
                    </template>
                </div>
            </div>
        </el-main>
    </el-container>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue';
import { api } from '../recommend.service';
import { useModal, usePagination } from '@/sheep/hooks';
import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
import { composeFilter } from '@/sheep/utils';
import { cloneDeep } from 'lodash';
import { ElMessageBox } from 'element-plus';
import { checkUrl } from '@/sheep/utils/checkUrlSuffix';


import { useRouter } from 'vue-router';

const loading= ref(true);
const props = defineProps({
    modal: {
        type: Object,
    },
});

const selectIndex = ref(0);

const scollbar = ref(null);

const calcImgSrc = computed(() => {
    if (state.detail.images) {
        return checkUrl(state.detail.images[selectIndex.value]);
    } else {
        return '';
    }

})

const calcPrice = computed(() => {
    if (state.detail.price) {
        return state.detail?.price[0]
    } else {
        return '--';
    }

})

const calcAttributes = computed(() => {
    if (state.detail.attributes) {
        return JSON.parse(state.detail.attributes);
    } else {
        return '';
    }
})


const state = reactive({
    detail: {},
})


onMounted(() => {
    getData();
})

async function getData() {
	loading.value = true;
    const res = await api.shopSelectDetails(props.modal.params.id);
	loading.value = false;

    if (res.error == 0) {
        state.detail = res.data;
    }
}


function itemClick(index) {

    selectIndex.value = index;
}

function preClick() {

    if (selectIndex.value == 0) {
        selectIndex.value = 0;
    } else {
        selectIndex.value = selectIndex.value - 1;
    }

    if (selectIndex.value == 2) {
        scollbar.value.scrollTo({
            left: -100,
            behavior: 'smooth',
        })
    } else if (selectIndex.value == 5) {
        scollbar.value.scrollTo({
            left: -200,
            behavior: 'smooth',
        })
    }
}

function nextClick() {

    if (selectIndex.value == imgs.value.length - 1) {
        selectIndex.value = imgs.value.length - 1;
    } else {
        selectIndex.value = selectIndex.value + 1;
    }

    if (selectIndex.value == 3) {

        scollbar.value.scrollTo({
            left: 200,
            behavior: 'smooth',
        })
    } else if (selectIndex.value == 6) {

        scollbar.value.scrollTo({
            left: 500,
            behavior: 'smooth',
        })
    } else if (selectIndex.value == 8) {

        scollbar.value.scrollTo({
            left: 700,
            behavior: 'smooth',
        })
    }

}

</script>

<style scoped lang="scss">
.title-txt {
    width: 96px;
    height: 35px;
    font-family: Source Han Sans;
    font-size: 24px;
    font-weight: bold;
    line-height: normal;
    text-align: center;
    letter-spacing: normal;
    color: #202020;
}

.category-txt {

    height: 23px;
    font-family: Source Han Sans;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: normal;
    color: #9E9E9E;
}

.img-view {
    width: 355px;
    height: 424px;
    border-radius: 10rpx;

    .swiper {
        width: calc(100% - 44px);
    }

    .icon {
        width: 22px;
        height: 55px;
        background: #D8D8D8;
    }

}

.info {

    .info-top {
        .merchant-txt {
           
            height: 24px;
            border-radius: 4px;
            background: #FFF2E6;


            display: flex;
            justify-content: center;
            align-items: center;

            font-family: Source Han Sans;
            font-size: 12px;
            font-weight: 500;
            line-height: 12px;
            letter-spacing: normal;
            color: #FF8E00;
        }

        .merchant-title {
            
            font-family: Source Han Sans;
            font-size: 24px;
            font-weight: bold;
            line-height: normal;
            letter-spacing: normal;
            color: #202020;
        }

        .lookfor {
           
            height: 35px;
            font-family: Source Han Sans;
            font-size: 24px;
            font-weight: bold;
            line-height: normal;
            letter-spacing: normal;
            color: #3768FA;
        }

        .info-item {

            .info-item-label {
                width: 72px;
                font-family: Source Han Sans;
                font-size: 18px;
                font-weight: 500;
                line-height: normal;
                letter-spacing: normal;
                color: #9E9E9E;
            }

            .info-item-title {

                margin-left: 45px;
                height: 26px;
                font-family: Source Han Sans;
                font-size: 18px;
                font-weight: 500;
                line-height: normal;
                letter-spacing: normal;

            }

            .color-red {
                color: #FA5151;
            }

            .color-black {
                color: #202020;
            }
        }
    }

    .btns-group {
        .one-btn {

            width: 189px;
            height: 54px;
            border-radius: 10px;
            background: #3662EC;

            display: flex;
            justify-content: center;
            align-items: center;

            font-family: Source Han Sans;
            font-size: 24px;
            font-weight: normal;
            line-height: normal;
            text-align: center;
            letter-spacing: normal;
            color: #FFFFFF;
        }

        .two-btn {
            width: 189px;
            height: 54px;
            border-radius: 10px;
            background: rgba(216, 216, 216, 0.08);
            box-sizing: border-box;
            border: 1px solid #C8C8C8;

            display: flex;
            justify-content: center;
            align-items: center;

            font-family: Source Han Sans;
            font-size: 24px;
            font-weight: normal;
            line-height: normal;
            text-align: center;
            letter-spacing: normal;
            color: #202202;

        }
    }
}

.attr {
    .attr-txt {
        width: 80px;
        height: 29px;
        font-family: Source Han Sans;
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
        text-align: center;
        letter-spacing: normal;
        color: #9E9E9E;
    }


    .table-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;

        .item {
            margin-right: 30px;
            margin-bottom: 18px;

            .item-label {
                width: 144px;
                min-width: 144px;
                height: 26px;
                font-family: Source Han Sans;
                font-size: 18px;
                font-weight: 500;
                line-height: normal;
                letter-spacing: normal;
                color: #9E9E9E;
            }

            .item-txt {
                margin-left: 10px;
                width: 230px;
                height: 26px;
                font-family: Source Han Sans;
                font-size: 18px;
                font-weight: 500;
                line-height: normal;
                letter-spacing: normal;

                color: #202020;

                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
                white-space: nowrap;
            }
        }

    }

}

.scrollbar-content {
    display: flex;
    width: fit-content;

}

.scrollbar-item {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 54px;
    margin-left: 10px;
    margin-right: 10px;

}

.select {
    border: #FA5151 1px solid;
}

.unselect {
    border: none;
}
</style>